<template>
  <div id="costRegister">
    <el-card class="box-card" style="margin:15px">
      <div style="margin-bottom:10px">
        <el-button size="mini" type="primary" icon="el-icon-document-checked" @click="clickAdd">增加</el-button>
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-document-checked"
          @click="clickDeletes"
        >删除</el-button>
        <el-button
          size="mini"
          type="primary"
          icon="el-icon-document-checked"
          @click="clickEditPrice"
          v-loading="editPriceLoading"
        >修正费用</el-button>
        <el-button size="mini" @click="getList()">刷新</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
        @selection-change="selectTable"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" prop="sortValue" label="图标" width="80" />
        <el-table-column align="center" prop="experimentCode.data" label="实验项目" />
        <el-table-column align="center" prop="experimentCodeName" label="项目名称" />
        <el-table-column align="center" prop="projectDesc" label="项目描述" show-overflow-tooltip />
        <el-table-column align="center" prop="experimentPrice" label="价格" width="80" />
        <el-table-column align="center" prop="returnNorm" label="返还标准" width="80" />
        <el-table-column align="center" prop="startTime" label="开始日期">
          <template slot-scope="scope">
            <span>
              {{
              scope.row.startTime
              ? scope.row.startTime.substr(0, 10)
              : ""
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="endTime" label="结束日期">
          <template slot-scope="scope">
            <span>
              {{
              scope.row.endTime
              ? scope.row.endTime.substr(0, 10)
              : ""
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="priceStatus.data" label="状态" />
        <!-- <el-table-column align="center" prop="referenceValue" label="排序" /> -->
        <el-table-column align="center" label="操作" width="260">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              style="background:#2669F3"
              @click="clickEdit(scope.row)"
            >修改</el-button>
            <el-button size="mini" type="danger" @click="clickDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增 -->
    <el-dialog :visible.sync="addShow" width="40%" title="新增">
      <el-form
        ref="projectManageForm"
        :model="addData"
        :rules="addDataRules"
        label-width="120px"
        size="mini"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="实验项目:" prop="projectIdList" class="experimentCode.key">
              <el-radio-group v-model="addData.experimentCode.key" border="true" size="mini">
                <el-radio
                  v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目名称:" prop="experimentCodeName" style="width:300px">
              <el-input size="mini" v-model="addData.experimentCodeName" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目描述:" prop="projectDesc" style="width:300px">
              <el-input size="mini" v-model="addData.projectDesc" placeholder="输入" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="项目图片" prop="projectPicture" style="width:300px">
              <el-input size="mini" v-model="addData.projectPicture" placeholder="输入" />
            </el-form-item>
          </el-col>-->
          <el-col :span="24">
            <el-form-item label="项目价格:" prop="experimentPrice" style="width:300px">
              <el-input size="mini" v-model="addData.experimentPrice" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="返还标准:" prop="returnNorm" style="width:300px">
              <el-input size="mini" v-model="addData.returnNorm" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收费标准:" prop="feeNorm" style="width:300px">
              <el-input size="mini" v-model="addData.feeNorm" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否启用:" prop="priceStatus.key">
              <el-radio-group v-model="addData.priceStatus.key" border="true" size="mini">
                <el-radio
                  v-for="(item, key, index) in dicts.PRICE_STATUS"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收费起始时间:" prop="startTime" style="width:300px">
              <el-date-picker
                size="mini"
                v-model="addData.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收费终止时间:" prop="endTime" style="width:300px">
              <el-date-picker
                size="mini"
                v-model="addData.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="flex" style="margin-top:40px">
          <el-button
            type="primary"
            size="mini"
            style="background:#2669F3;width:120px"
            @click="clickSeave"
          >确定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog :visible.sync="editShow" width="40%" title="修改">
      <el-form
        ref="projectManageForm"
        :model="editData"
        :rules="addDataRules"
        label-width="120px"
        size="mini"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="实验项目:" prop="projectIdList" class="experimentCode.key">
              <el-radio-group v-model="editData.experimentCode.key" border="true" size="mini">
                <el-radio
                  v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目名称:" prop="experimentCodeName" style="width:300px">
              <el-input size="mini" v-model="editData.experimentCodeName" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目描述:" prop="projectDesc" style="width:300px">
              <el-input size="mini" v-model="editData.projectDesc" placeholder="输入" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="项目图片" prop="projectPicture" style="width:300px">
              <el-input size="mini" v-model="editData.projectPicture" placeholder="输入" />
            </el-form-item>
          </el-col>-->
          <el-col :span="24">
            <el-form-item label="项目价格:" prop="experimentPrice" style="width:300px">
              <el-input size="mini" v-model="editData.experimentPrice" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="返还标准:" prop="returnNorm" style="width:300px">
              <el-input size="mini" v-model="editData.returnNorm" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收费标准:" prop="feeNorm" style="width:300px">
              <el-input size="mini" v-model="editData.feeNorm" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否启用:" prop="priceStatus.key">
              <el-radio-group v-model="editData.priceStatus.key" border="true" size="mini">
                <el-radio
                  v-for="(item, key, index) in dicts.PRICE_STATUS"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收费起始时间:" prop="startTime" style="width:300px">
              <el-date-picker
                size="mini"
                v-model="editData.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="收费终止时间:" prop="endTime" style="width:300px">
              <el-date-picker
                size="mini"
                v-model="editData.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="flex" style="margin-top:40px">
          <el-button
            type="primary"
            size="mini"
            style="background:#2669F3;width:120px"
            @click="clickEditSeave"
          >确定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 项目费用修改 -->
    <el-dialog :visible.sync="editPriceShow" width="85%" title="修改">
      <el-table
        v-loading="editPriceLoading"
        :data="editPriceTable"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
      >
        <el-table-column align="center" prop="expNum" label="实验编号" width="150" />
        <el-table-column align="center" prop="momName" label="母亲姓名" />
        <el-table-column align="center" prop="birthTime" label="出生日期">
          <template slot-scope="scope">
            <span>
              {{
              scope.row.birthTime
              ? scope.row.birthTime.substr(0, 10)
              : ""
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="bloodTime" label="采血日期">
          <template slot-scope="scope">
            <span>
              {{
              scope.row.bloodTime
              ? scope.row.bloodTime.substr(0, 10)
              : ""
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="phone" label="手机号码" />
        <el-table-column align="center" prop="barCode" label="条形码号" width="150" />
        <el-table-column align="center" prop="experimentProject" label="实验项目" />
        <el-table-column align="center" prop="payWay.data" label="支付渠道" />
        <el-table-column align="center" prop="freeNum" label="免费券号" />
        <el-table-column align="center" prop="price" label="费用" />
      </el-table>
      <div style="width:100%;display:flex;margin-top:15px">共{{editPriceTable.length}}条数据</div>
      <div class="flex" style="margin-top:40px">
        <el-button
          type="primary"
          size="mini"
          style="background:#2669F3;width:120px"
          @click="clickEditPriceSeave"
        >保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MessageStatisticsApi from "@/api/MessageStatistics.js";
import { initDicts } from "@/utils/commons";
export default {
  data() {
    return {
      // 转菊花
      loading: false,
      // 增加弹窗
      addShow: false,
      // 修改弹窗
      editShow: false,
      // 修正费用
      editPriceLoading: false,
      editPriceShow: false,
      editPriceTable: [],
      // 总数
      total: 0,
      // 表格数据
      tableData: [],
      // 选中数据
      selectList: [],
      addData: {
        endTime: "",
        experimentCode: {
          data: "",
          key: ""
        },
        experimentPrice: "",
        returnNorm: "",
        feeNorm: "",
        priceStatus: {
          data: "",
          key: "yes"
        },
        startTime: "",
        experimentCodeName: "",
        projectDesc: "",
        projectPicture: ""
      },
      // 修改数据
      editData: {
        endTime: "",
        experimentCode: {
          data: "",
          key: ""
        },
        experimentPrice: "",
        priceStatus: {
          data: "",
          key: ""
        },
        returnNorm: "",
        feeNorm: "",
        startTime: "",
        experimentCodeName: "",
        projectDesc: "",
        projectPicture: ""
      },
      addDataRules: {
        "experimentCode.key": [
          { required: true, message: "   ", trigger: "change" }
        ],
        indicatorCodeName: [
          { required: true, message: "   ", trigger: "change" }
        ],
        indicatorCode: [{ required: true, message: "   ", trigger: "change" }],
        highHint: [{ required: true, message: "   ", trigger: "change" }],
        lowHint: [{ required: true, message: "   ", trigger: "change" }],
        maxValue: [{ required: true, message: "   ", trigger: "change" }],
        minValue: [{ required: true, message: "   ", trigger: "change" }],
        normalHint: [{ required: true, message: "   ", trigger: "change" }],
        referenceValue: [{ required: true, message: "   ", trigger: "change" }],
        sortValue: [{ required: true, message: "   ", trigger: "change" }],
        units: [{ required: true, message: "   ", trigger: "change" }]
      },
      // 字典
      dicts: {
        EXPERIMENT_CODE: {}, //项目
        PRICE_STATUS: {} //项目费用状态
      }
    };
  },
  mounted() {
    initDicts(["EXPERIMENT_CODE", "PRICE_STATUS"], this.dicts);
    this.getList();
  },
  methods: {
    // 列表选择
    selectTable(v) {
      this.selectList = v;
    },
    // 获取数据
    getList() {
      this.loading = true;
      MessageStatisticsApi.costRegister
        .page()
        .then(res => {
          if (res.status == "200") {
            this.tableData = res.data.data;
            this.loading = false;
          } else {
            this.$message.error(res.statusText);
          }
        })
        .finally(() => (this.loading = false));
    },
    // 点击增加
    clickAdd() {
      let date =
        new Date().getFullYear().toString() +
        "-" +
        ((new Date().getMonth() + 1).toString() < 10
          ? "0" + (new Date().getMonth() + 1).toString()
          : (new Date().getMonth() + 1).toString()) +
        "-" +
        (new Date().getDate().toString() < 10
          ? "0" + new Date().getDate().toString()
          : new Date().getDate().toString());
      this.addData = {
        endTime: date,
        experimentCode: {
          data: "",
          key: ""
        },
        experimentPrice: "",
        priceStatus: {
          data: "",
          key: "yes"
        },
        startTime: date
      };
      this.addShow = true;
    },
    // 点击修改
    clickEdit(v) {
      this.editData = JSON.parse(JSON.stringify(v));
      this.editShow = true;
    },
    // 点击修正费用
    clickEditPrice() {
      this.editPriceLoading = true;
      MessageStatisticsApi.costRegister
        .sampleCost()
        .then(res => {
          if (res.status == "200") {
            if (res.data.data) {
              this.editPriceTable = res.data.data;
              this.editPriceShow = true;
            }
          } else {
            this.$message.error(res.statusText);
          }
        })
        .finally(() => (this.editPriceLoading = false));
    },
    // 点击修正费用保存
    clickEditPriceSeave() {
      MessageStatisticsApi.costRegister
        .updSampleCost(this.editPriceTable)
        .then(res => {
          if (res.status == "200") {
            this.getList();
            this.$message({
              type: "success",
              message: res.statusText
            });
          } else {
            this.$message.error(res.statusText);
          }
        })
        .finally(() => (this.editPriceShow = false));
    },
    // 点击删除
    clickDeletes() {
      if (this.selectList.length == 0) {
        this.$message.error("请选择要删除的数据");
        return;
      }
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        let index = 0;
        this.selectList.forEach(item => {
          MessageStatisticsApi.costRegister
            .delete({ "ids[]": item.id })
            .then(res => {
              if (res.status == "200") {
                index++;
                if (index == this.selectList.length) {
                  this.getList();
                  this.$message({
                    type: "success",
                    message: res.statusText
                  });
                }
              } else {
                this.$message.error(res.statusText);
              }
            });
        });
      });
    },
    // 点击删除
    clickDelete(id) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        MessageStatisticsApi.costRegister.delete({ "ids[]": id }).then(res => {
          if (res.status == "200") {
            this.getList();
            this.$message({
              type: "success",
              message: res.statusText
            });
          } else {
            this.$message.error(res.statusText);
          }
        });
      });
    },
    // 新增保存
    clickSeave() {
      this.$refs.projectManageForm.validate(valid => {
        if (valid) {
          MessageStatisticsApi.costRegister.add(this.addData).then(res => {
            if (res.status == "200") {
              this.$message({
                type: "success",
                message: res.statusText
              });
              this.getList();
              this.addShow = false;
            } else {
              this.$message.error(res.statusText);
            }
          });
        } else {
          return false;
        }
      });
    },
    // 修改保存
    clickEditSeave() {
      this.$refs.projectManageForm.validate(valid => {
        if (valid) {
          MessageStatisticsApi.costRegister.edit(this.editData).then(res => {
            if (res.status == "200") {
              this.$message({
                type: "success",
                message: res.statusText
              });
              this.getList();
              this.editShow = false;
            } else {
              this.$message.error(res.statusText);
            }
          });
        } else {
          //   console.log('error submit!!')
          return false;
        }
      });
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#costRegister {
  .el-form-item__content {
    height: 28px;
  }
  @media screen and (max-width: 1450px) {
    .el-form-item__content {
      height: 40px;
    }
  }

  .el-date-editor {
    width: 100%;
  }
  .el-dialog__header {
    .flex;
    background: #2669f3;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #ffffff;
    }
  }
  .el-dialog__body {
    .flex;
    flex-direction: column;
    .top-list {
      width: 65%;
      .col {
        margin: 15px 0;
      }
    }
  }
  .acceptance-dialog {
    max-height: 265px;
    overflow: auto;
  }
  .but-form {
    margin: 20px 0;
  }
}
</style>
